<template>
  <div class="meun">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      :unique-opened="true"
      router
      active-text-color="#ffd04b">
        <template v-for="item in routes">
          <!-- 侧边栏循环渲染， -->
            <el-menu-item :key="item.path" :index="item.path" :route="item.path">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    watch: {
      $route: {
        handler(val) {
          console.log(val)
        },
        deep: true,
        immediate: true
      }
    },
    data() {
      return{
        routes: []
      }
    },
    mounted() {
      this.routesSplice()
    },
    methods: {
      // 将login页面单独过滤出去，不显示在菜单上
      routesSplice() {
        console.log(this.$router.options.routes,46)
        let routes = this.$router.options.routes;
        // console.log(this.routes,44)
        this.routes = routes.filter((item,index)=> {
          return item.meta.isLogin
        })
        console.log(this.routes,52)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      routesClick(item) {
        console.log(item,61);
        this.$router.push({
          path: item.path
        })
      }
    }
  }
</script>
<style lang="scss">
// .meun {
//   width: 200px;
// }
.el-menu-vertical-demo {
  height: 100vh;
}
</style>